<script>
export default {
    data() {
        return {
            time: '00:00',
            duration: '00:00',
            progressStyle: { width: '' },
            dotStyle: { left: '' },
            isMute: false
        };
    },
    methods: {
        // 播放暂停控制
        playAudio() {
            let recordAudio = this.$refs.recordAudio;
            if (recordAudio.paused) {
                recordAudio.play();
            } else {
                recordAudio.pause();
            }
        },

        // 进度条更新
        timeUpdate() {
            this.duration = this.transTime(this.$refs.recordAudio.duration);
            let timeStr = parseInt(this.$refs.recordAudio.currentTime, 10);
            this.time = this.transTime(timeStr);
            let scales = this.$refs.recordAudio.currentTime / this.$refs.recordAudio.duration;
            this.progressStyle.width = scales * 100 + '%';
            this.dotStyle.left = scales * 100 + '%';
        },

        // 播放结束
        onEnded() {
        // 播放完会到初始状态
        /*
          this.time = "00:00";
          this.progressStyle.width = 0;
          this.dotStyle.left = 0;
          */
        },

        // 用户可以开始播放audio
        canPlay() {
        // 获取audio音频文件总时长 并设置到界面并解决出现 NAN 的问题
            this.duration = this.transTime(this.$refs.recordAudio.duration);
        },

        // 静音控制
        listenAudio() {
            if (this.isMute) {
                this.$refs.recordAudio.volume = 1;
                this.isMute = false;
            } else {
                this.$refs.recordAudio.volume = 0;
                this.isMute = true;
            }
        },

        // 鼠标点击移动播放进度
        controlAudioProgress(event) {
            let audio = this.$refs.recordAudio;
            let auidioProgress = this.$refs.auidioProgress;
            if (!audio.paused || audio.currentTime !== 0) {
                let pgsWidth = parseFloat(window.getComputedStyle(auidioProgress, null).width.replace('px', ''));
                let rate = event.offsetX / pgsWidth;
                audio.currentTime = audio.duration * rate;
                this.timeUpdate();
            }
        },

        // 下载音频
        downloadCallRecord() {
            // console.log("下载...");
        },

        // 时间转换
        transTime(value) {
            let time = '';
            let h = parseInt(value / 3600, 10);
            value %= 3600;
            let m = parseInt(value / 60, 10);
            let s = parseInt(value % 60, 10);
            if (h > 0) {
                time = this.formatTime(h + ':' + m + ':' + s);
            } else {
                time = this.formatTime(m + ':' + s);
            }
            return time;
        },

        // 时间格式化
        formatTime(value) {
            let time = '';
            let s = value.split(':');
            let i = 0;
            for (; i < s.length - 1; i++) {
                time += s[i].length === 1 ? ('0' + s[i]) : s[i];
                time += ':';
            }
            time += s[i].length === 1 ? ('0' + s[i]) : s[i];
            return time;
        }
    }
};
</script>
<template>
<div class="videoWrap" onselectstart="return false">
    <video poster="poster.jpg" src="myVideo.mp4" width="320" preload id="video" autoplay></video>
    <div class="panel"><span id="start">播控</span>   <span id="voice">静音</span></div>
</div>
</template>
<style scoped>
.videoWrap {position:relative;}
.panel {position:absolute; width: 320px; height:60px; bottom:0; background: rgba(0,0,0,.5); color:#fff; }
</style>
